<template>
 <div>
<!--   导航栏-->
   <van-nav-bar title="商品详情" class="nav-t" left-arrow>
     <van-icon name="service-o" slot="right"></van-icon>
   </van-nav-bar>
<!--   轮播图-->
   <van-swipe class="swipe" autoplay="3000">
     <van-swipe-item><img src="../../../public/static/image/details/wallhaven-8o3jdk.jpg" alt=""></van-swipe-item>
     <van-swipe-item><img src="../../../public/static/image/details/wallhaven-8oev1j.jpg" alt=""></van-swipe-item>
     <van-swipe-item><img src="../../../public/static/image/details/wallhaven-9m2mo1.jpg" alt=""></van-swipe-item>
     <van-swipe-item><img src="../../../public/static/image/details/wallhaven-9m2rg1.jpg" alt=""></van-swipe-item>
   </van-swipe>
<!--   商品介绍-->
   <div class="title clearfix">
   <h1 class="title-h1">Tkk运动水杯tritan便携随行耐摔简约设计500ML/650ML多色可选</h1>
   <span class="price"><strong>49</strong>元</span>
   <span class="sold">已售5</span>
   </div>
<!--   评论区-->
   <div class="comment">
     <p><span>暂无评论</span></p>
   </div>
<!--   推荐区-->
   <div class="recommend" >
     <p>为您推荐</p>
     <div class="recommend-content" v-for="item of 3" :key="item">
       <img src="../../../public/static/image/details/wallhaven-9m2mo1.jpg" alt="">
       <h4>推荐一</h4>
       <p><strong>9.5</strong>元</p>
       <span>20</span>
     </div>
   </div>
<!--   底部购物栏-->
   <van-goods-action>
     <van-goods-action-icon icon="chat-o" text="客服" dot />
     <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
     <van-goods-action-button type="warning" text="加入购物车" />
     <van-goods-action-button type="danger" text="立即购买" />
   </van-goods-action>
 </div>
</template>

<script>
export default {
  name: "Details",
  data(){
    return {

    }
  },
  mounted() {

  }
}
</script>

<style scoped>
.title {
  padding-bottom: 15px;
}

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.swipe img{
  width: 100%;
}

.title-h1 {
  margin-left: 5px;
  margin-bottom: 10px;
}

.price {
  margin-left: 5px;
}

.sold {
  float: right;
  margin-right: 5px;
}
.comment {
  padding: 15px 0;
  background-color: #ebebeb;
}

.comment p {
  height: 40px;
  background-color: #fff;
  line-height: 40px;
}
.comment p span {
  margin-left: 5px;
}
.recommend > p {
 margin: 10px 0px 10px 5px;
}

.recommend-content {
  height: 130px;
  width: 110px;
  background-color: pink;
  margin-left: 5px;
  display: inline-block;
}

.recommend-content img {
  width: 100%;
}

.recommend-content h4 {
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 10px;
}

.recommend-content p {
  margin-bottom: 3px;
  font-size: 14px;
  color: #df3552;
}
.recommend-content p strong {
  font-size: 16px;
}
.recommend-content span {
  color: #b1afb0;
  text-decoration:line-through
}
</style>